<template>
	<div id="good">
		<header>
			<div class="header_1">
				<router-link to="/user/recharge">
					<img src="../../static/img/home-01.png"/>
				</router-link>
				<div class="search">
					<input id="searchInput" @focus="focus" type="text" placeholder="搜索你喜欢的宝贝" v-model="taskName" />
					<img @click="search" src="../../static/img/home-15.png"/>
				</div>
				<router-link to="/user/makegold">
					<img src="../../static/img/home-02.png"/>
				</router-link>
			</div>
			<div class="header_3">
				<div>
					<img v-if="type == 1" @click="type = 1" src="../../static/img/good-03.png"/>
					<img v-else-if="type == 2" @click="type = 1" src="../../static/img/good-02.png"/>
					<img v-if="type == 1" @click="type = 2" src="../../static/img/good-04.png"/>
					<img v-else-if="type == 2" @click="type = 2" src="../../static/img/good-05.png"/>
				</div>
			</div>
			<div class="header_2">
				<ul>
					<li v-for="item in classifyList" @click="classify(item.id)" :class="classify_num == item.id?'classify_active':''">{{item.name}}</li>
				</ul>
			</div>
		</header>
		<div id="screen">
			<ul v-show="type == 1" class="screen_1">
				<li @click="screenList.type = ''" :class="screenList.type == ''?'screen_1_active':''">全部</li>
				<li @click="screenList.type = 1" :class="screenList.type == 1?'screen_1_active':''">组团开奖</li>
				<li @click="screenList.type = 2" :class="screenList.type == 2?'screen_1_active':''">90%中奖率</li>
				<li @click="screenList.type = 3" :class="screenList.type == 3?'screen_1_active':''">京东</li>
				<li @click="screenList.type = 4" :class="screenList.type == 4?'screen_1_active':''">赏金任务</li>
				<li @click="screenList.type = 5" :class="screenList.type == 5?'screen_1_active':''">高价值</li>
			</ul>
			<ul class="screen_2">
				<li @click="screenList.orderBy = ''" :class="screenList.orderBy == ''?'screen_2_active':''">
					<p>综合</p>
				</li>
				<li @click="Screen(1)" :class="screenList.orderBy == 1||screenList.orderBy == 2?'screen_2_active':''">
					<p>最新</p>
					<img :class="screenList.orderBy == 2?'rot':''" :src="screenList.orderBy == 1||screenList.orderBy == 2?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
				</li>
				<li @click="Screen(3)" :class="screenList.orderBy == 3||screenList.orderBy == 4?'screen_2_active':''">
					<p>价值</p>
					<img :class="screenList.orderBy == 4?'rot':''" :src="screenList.orderBy == 3||screenList.orderBy == 4?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
				</li>
				<li @click="Screen(5)" :class="screenList.orderBy == 5||screenList.orderBy == 6?'screen_2_active':''">
					<p>人气</p>
					<img :class="screenList.orderBy == 6?'rot':''" :src="screenList.orderBy == 5||screenList.orderBy == 6?'./static/img/arrow-02.png':'./static/img/arrow-01.png'"/>
				</li>
				<div @click="otherShow = true" class="screen_list">
					<p>筛选</p>
					<img src="../../static/img/good-01.png"/>
				</div>
			</ul>
		</div>
		<div :class="type == 1?'task_list':'task_list margin'" v-show="!show">
			<div v-for="item in taskList" class="task_item">
				<div class="task_img" @click="apply(item.id)">
				<!--<div class="task_img" @click="show = true,taskId = 'DS4611565188442'">-->
					<div class="good_img">
						<img src="../../static/img/imgLoading.png"/>
						<div class="img_box">
							<img :src="item.goodsImage"/>
						</div>
					</div>
					<span v-if="item.type == 5&&type == 1">首单99%中奖</span>
				</div>
				<div class="task_text">
					<div class="task_title">
						<img v-if="item.paltform == 1" src="../../static/img/tb.png"/>
						<img v-else-if="item.paltform == 2" src="../../static/img/tm.png"/>
						<img v-else-if="item.paltform == 3" src="../../static/img/jd.png"/>
						<p>{{item.taskName}}</p>
					</div>
					<div class="task_price">
						<p :class="type == 1?'through':''">¥{{item.price}}</p>
						<!--<p>{{item.applyNum}}人{{type == 1?'申请':'参拍'}}</p>-->
					</div>
					<div class="task_input">
						<input type="button" :value="type == 1?'免费申请':'免费参拍'" @click="apply(item.id)"/>
						<p @click="$router.push('/user/shareUser')">分享赚<span>12元</span></p>
					</div>
				</div>
			</div>
		</div>
		<div class="loading">
			<img src="../../static/img/loading.gif" width="40" height="40" v-if="loading"/>
			<!--<p v-else>---------------已经到底了----------</p>-->
			<p v-else><img src="../../static/img/nodata.png" width="50%"/></p>
		</div>
		<!---------其他筛选列表------------>
		<div @click="otherShow = false" v-show="otherShow" id="screen_other">
			<div @click.stop="" class="screen_other">
				<div class="other_item">
					<p>其他筛选</p>
					<ul>
						<li
							@click="notApply == 1?notApply='':notApply=1" 
							:class="notApply == 1?'other_active':''">
							我未申请的
							</li>
						<li
							@click="hasCoins == 1?hasCoins='':hasCoins=1" 
							:class="hasCoins == 1?'other_active':''">
							赠送金币
						</li>
					</ul>
				</div>
				<div class="other_item">
					<p>支持的支付方式</p>
					<ul>
						<li 
							@click="credit == 1?credit='':credit=1" 
							:class="credit == 1?'other_active':''">
							信用卡
						</li>
						<li 
							@click="huabei == 1?huabei='':huabei=1" 
							:class="huabei == 1?'other_active':''">
							花呗/京东白条
						</li>
						<li 
							@click="coupon == 1?coupon='':coupon=1" 
							:class="coupon == 1?'other_active':''">
							优惠券
						</li>
					</ul>
				</div>
				<div class="other_item">
					<p>价格区间（元）</p>
					<div>
						<input type="number" placeholder="最低价" v-model="lowPrice" />
						<span>--</span>
						<input type="number" placeholder="最高价" v-model="highPrice" />
					</div>
				</div>
				<div class="other_btns">
					<input @click="Reset" type="button" value="重置" />
					<input @click="otherShow = false,screenData()" type="button" value="完成" />
				</div>
			</div>
		</div>
		<!--<task-detail :taskId='taskId'
			v-model="show"
			@detail='detail'
			@Return='Return'
			></task-detail>-->
	</div>
</template>

<script>
export default{
	name: 'good',
	data: function(){
		return{
			taskId: '',
			show: false,
			type: 1,//类型  1：赶紧试  2：赶紧拍
			classify_num: 0,//分类选中判断参数
			//--------分类列表---------
			classifyList: [
				{name:'全部',id: 0},
				{name:'女装',id: 1},
				{name:'男装',id: 2},
				{name:'鞋包',id: 3},
				{name:'百货',id: 4},
				{name:'母婴',id: 5},
				{name:'配饰',id: 6},
				{name:'电器',id: 7},
				{name:'家居',id: 8},
				{name:'美妆',id: 9},
				{name:'食品',id: 10},
				{name:'车品',id: 11},
				{name:'其他',id: 12},
			],
			otherShow: false,//其它筛选显示隐藏
			screenList:{//筛选
				goodsType: '全部',//商品类目
				type: '',//活动类型
				orderBy: '',//排序筛选
			},
			taskList:[//任务列表
			],
			taskName: '',//搜索输入内容
			notApply: '',//未申请的
			hasCoins: '',//金币赠送
			credit: '',//信用卡
			huabei: '',//花呗/白条
			coupon: '',//优惠券
			lowPrice: '',//最低价
			highPrice: '',//最高价
			totalPage: 2, // 总页数
			loading: true, // 加载中
			startPage: 1,//当前页码
			pageSize: 10,//每页显示数量
		}
	},
	methods:{
		Return: function(){
			this.show = false;
		},
		detail:function(){
			
		},
		focus:function(){
			$('#searchInput').css('text-align','left');
			$('#searchInput').blur(function(){
				$('#searchInput').css('text-align','center');
			})
		},
		classify:function(n){
			this.classify_num = n;
			this.screenList.goodsType = this.classifyList[this.classify_num].name;
		},
		//--------排序筛选------------
		Screen:function(n){
			if(this.screenList.orderBy == n){
				this.screenList.orderBy = n+1;
			}else{
				this.screenList.orderBy = n;
			}
		},
		//--------重置筛选条件----------
		Reset:function(){
			this.notApply= '';//未申请的
			this.hasCoins= '';//金币赠送
			this.credit= '';//信用卡
			this.huabei= '';//花呗/白条
			this.coupon= '';//优惠券
			this.lowPrice= '';//最低价
			this.highPrice= '';//最高价
		},
		//--------筛选请求----------
		Request:function(){
			var _this = this;
			if(_this.startPage != 1 && _this.startPage > _this.totalPage){
				_this.loading = false;
				return;
			}
			var postData = _this.$qs.stringify({
				taskName: this.taskName,//搜索输入内容
				goodsType: this.screenList.goodsType,//商品类目
				type: this.screenList.type,//活动类型
				orderBy: this.screenList.orderBy,//排序筛选
				notApply: this.notApply,//未申请的
				hasCoins: this.hasCoins,//金币赠送
				credit: this.credit,//信用卡
				huabei: this.huabei,//花呗/白条
				coupon: this.coupon,//优惠券
				lowPrice: this.lowPrice,//最低价
				highPrice: this.highPrice,//最高价
				startPage: this.startPage,
				pageSize: this.pageSize
			});
			_this.$axios.post('/user/task/public/selectByCondition',postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					data = data.result;
					_this.totalPage = data.pages;
					if(data.total <= _this.pageSize){
						_this.loading = false;
					}
			    	for(var i = 0; i < data.list.length; i++){
				    	_this.taskList.push(data.list[i]);
				    }
	         		_this.startPage++;
				}else{
					console.log(data.result);
				}
			})
		},
		apply: function(taskId){
			if(this.type == 1){
				this.$router.push({name: 'taskDetail',params:{ taskId: taskId}});
			}else{
				this.$router.push({name: 'taskDetailAuction',params:{ taskId: taskId}});
			}
		},
		search: function(){
			this.taskList = []; 
			this.startPage = 1;
			this.loading = true;
			this.Request();
			if(this.type == 2){
				this.getAuction();
			}else{
				this.Request();
			}
		},
		screenData: function(){
			this.taskList = []; 
			this.startPage = 1;
			this.loading = true;
			if(this.type == 2){
				this.getAuction();
			}else{
				this.Request();
			}
		},
		lazyLoad: function(){
   			//变量scrollTop是滚动条滚动时，距离顶部的距离
   			var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
   			//变量windowHeight是可视区的高度
   			var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
   			//变量scrollHeight是滚动条的总高度
   			var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
            //滚动条到底部的条件
            if(this.startPage > 1 && scrollTop+windowHeight==scrollHeight){
            	if(this.loading){
	                //写后台加载数据的函数
	         		this.Request();
            	}
            }
       },
       // 获取拍卖列表
       getAuction: function(){
       		var _this = this;
			if(_this.startPage != 1 && _this.startPage > _this.totalPage){
				_this.loading = false;
				return;
			}
			var postData = _this.$qs.stringify({
				taskName: this.taskName,//搜索输入内容
				goodsType: this.screenList.goodsType,//商品类目
				orderBy: this.screenList.orderBy,//排序筛选
				notApply: this.notApply,//未申请的
				hasCoins: this.hasCoins,//金币赠送
				credit: this.credit,//信用卡
				huabei: this.huabei,//花呗/白条
				coupon: this.coupon,//优惠券
				lowPrice: this.lowPrice,//最低价
				highPrice: this.highPrice,//最高价
				startPage: this.startPage,
				pageSize: this.pageSize
			});
			_this.$axios.post('/user/auctionTask/public/selectByCondition',postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					data = data.result;
					_this.totalPage = data.pages;
					if(data.total <= _this.pageSize){
						_this.loading = false;
					}
			    	for(var i = 0; i < data.list.length; i++){
				    	_this.taskList.push(data.list[i]);
				    }
	         		_this.startPage++;
				}else{
					console.log(data.result);
				}
			});
      },
	},
	created:function(){
		if(this.$route.query.newUser){
			this.screenList.type = 	2;
		}else if(this.$route.query.jd){
			this.screenList.type = 3;
		}else if(this.$route.query.group){
			this.screenList.type = 1;
		}else if(this.$route.query.high){
			this.screenList.type = 5;
		}else if(this.$route.query.classify){
			this.classify(this.$route.query.classify);
		}else if(this.$route.query.taskName != undefined){
			this.taskName = this.$route.query.taskName;
			this.taskList = []; 
			this.startPage = 1;
			this.loading = true;
			this.Request();
		}else{
			this.taskList = []; 
			this.startPage = 1;
			this.loading = true;
			this.Request();
		}
	},
	watch:{
		screenList:{
			handler: function () {
				this.taskList = []; 
				this.startPage = 1;
				this.loading = true;
				if(this.type == 2){
					this.getAuction();
				}else{
					this.Request();
				}
		    },
			deep: true 
		},
		type(){
			this.taskList = [];
			this.startPage = 1;
			this.loading = true;
			if(this.type == 2){
				this.getAuction();
			}else{
				this.Request();
			}
		}
	},
	mounted:function(){
		document.addEventListener('scroll', this.lazyLoad);
	},
	destroyed: function(){
		document.removeEventListener('scroll', this.lazyLoad);
	}
}
</script>

<style scoped>
/* ========== */
/* = Header 7.5rem = */
/* ========== */
header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 11;
}
.header_1{
	display: flex;
	align-items: center;
	padding: 1rem;
	box-sizing: border-box;
}
.header_1 a img{
	height: 2.5rem;
	display: block;
}
.search{
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
	width: calc(100% - 7rem);
	border-radius: 50px;
	height: 2.5rem;
	padding-left: 1rem;
	box-sizing: border-box;
	margin: 0 1rem;
}
.search img{
	height: 1.5rem;
	display: block;
}
.search input{
	border: none;
	background-color: transparent;
	height: 100%;
	width: calc(100% - 3rem);
	text-align: center;
	font-size: 1.4rem;
	color: #4F4F4F;
}
.header_2 ul{
	width: 100%;
	display: -webkit-box;
	overflow-x: auto;
	font-size: 1.4rem;
	height: 3rem;
	border-top: 1px solid #EEEEEE;
}
.header_2 ul li{
	margin: 0 1rem;
	color: #4F4F4F;
	text-align: center;
	height: 3rem;
	line-height: 3rem;
	border-bottom: 2px solid transparent;
	box-sizing: border-box;
}
.header_2 ul li.classify_active{
	color: #FF6565;
	border-bottom: 2px solid #FF6565;
}
.header_3{
	display: flex;
	justify-content: space-around;
	height: 3.7rem;
	position: relative;
	background-color: #4B3BB1;
}
.header_3 div{
	position: absolute;
	width: 100%;
	height: 3.7rem;
	top: 0.45rem;
	left: 0;
	display: flex;
	justify-content: center;
}
.header_3 img{
	height: 3.7rem;
	display: block;
}
.header_3 img:first-child{
	margin-right: 4%;
}
/* ========== */
/* = screen 6.5rem = */
/* ========== */
#screen{
	position: fixed;
	/*top: 7.6rem;*/
	top: 11.25rem;
	left: 0;
	width: 100%;
	z-index: 10;
}
.screen_1{
	width: 100%;
	overflow-x: auto;
	display: -webkit-box;
	padding: 0.5rem 1rem;
	box-sizing: border-box;
	background-color: #F5F5F5;
}
.screen_1 li{
	width: 6.5rem;
	height: 2rem;
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	color: #787878;
	border-radius: 5px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 1rem;
	font-size: 1.2rem;
}
.screen_1 li.screen_1_active{
	color: #FF6565;
	border: 1px solid #FE969D;
	background-color: #FEEAE9;
}
.screen_2{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
	font-size: 1.2rem;
	padding: 1rem;
	height: 3.5rem;
}
.screen_2 li{
	display: flex;
	align-items: center;
}
.screen_2 li.screen_2_active{
	color: #FF6565;
}
.screen_2 li p{
	white-space: nowrap;
}
.screen_2 li img{
	height: 0.5rem;
	display: block;
	margin-left: 0.3rem;
}
.screen_list{
	
}
.screen_list p{
	display: inline-block;
}
.screen_list img{
	height: 0.8rem;
	display: inline-block;
	margin-left: 0.2rem;
}
.rot{
	transform: rotateZ(180deg);
}
/*----------任务列表-------------*/
.task_list{
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	/*margin-top: 14.5rem;*/
	margin-top: 17.5rem;
}
.margin{
	margin-top: 14.5rem;
}
.task_item{
	width: calc(50% - 0.5rem);
	background-color: #fff;
	margin-right: 1rem;
	margin-bottom: 1rem;
}
.task_item:nth-child(2n){
	margin-right: 0;
}
.task_item .task_img{
	width: 100%;
	position: relative;
}
.task_item .task_img img{
	width: 100%;
	display: block;
}
.good_img{
	width: 100%;
	position: relative;
	margin-bottom: 0.3rem;
}
.good_img>img{
	width: 100%;
	display: block;
}
.good_img .img_box{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.good_img .img_box img{
	width: 100%;
	display: block;
}
.task_item .task_img span{
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2px 5px;
	font-size: 1.2rem;
	color: #FFFFFF;
	background-color: #FF6565;
}
.task_text{
	padding: 0.5rem;
	padding-bottom: 1rem;
	box-sizing: border-box;
}
.task_title{
	display: flex;
	align-items: center;
}
.task_title img{
	height: 1.5rem;
	display: block;
	margin-right: 0.3rem;
}
.task_title p{
	width: calc(100% - 1.8rem);
	font-size: 1.4rem;
	color: #4F4F4F;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.task_price{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 1.2rem;
}
.task_price p:first-child{
	color: #FF6565;
}
.task_price p.through{
	text-decoration: line-through;
}
.task_price p:last-child{
	color: #787878;
}
.task_input{
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
}
.task_input input{
	width: 47%;
	height: 2.5rem;
	background-color: #FF6565;
	color: #FFFFFF;
	border-radius: 3px;
	border: none;
	font-size: 1.2rem;
}
.task_input p{
	width: 47%;
	height: 2.5rem;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
	text-align: center;
	line-height: 2.5rem;
	color: #4F4F4F;
	font-size: 1.2rem;
	border-radius: 3px;
}
.task_input p span{
	color: #FF6565;
}
/*----------其他筛选列表-----------*/
#screen_other{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 11;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}
.screen_other{
	width: 75%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #fff;
	padding-top: 2rem;
	box-sizing: border-box;
}
.other_item{
	padding: 1rem;
	border-bottom: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.other_item p{
	font-size: 1.4rem;
	color: #4F4F4F;
	margin-bottom: 1rem;
}
.other_item ul{
	display: flex;
	flex-wrap: wrap;
}
.other_item ul li{
	height: 2.5rem;
	width: 8rem;
	background-color: #F5F5F5;
	color: #787878;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-size: 1.2rem;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}
.other_item ul li.other_active{
	border: 1px solid #FF6565;
	color: #FF6565;
	background-color: #fff;
}
.other_item div{
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
.other_item div input{
	height: 2.5rem;
	width: 8rem;
	background-color: #F5F5F5;
	border: none;
	text-align: center;
	font-size: 1.2rem;
	border-radius: 0;
}
.other_item div span{
	margin: 0 1rem;
	font-size: 1.4rem;
	color: #A9A9A9;
}
.other_btns{
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}
.other_btns input{
	height: 2.5rem;
	width: 8rem;
	border-radius: 0;
	font-size: 1.2rem;
}
.other_btns input:first-child{
	border: 1px solid #FF6565;
	color: #FF6565;
	background-color: #fff;
	margin-right: 1rem;
}
.other_btns input:last-child{
	border: none;
	color: #FFFFFF;
	background-color: #FF6565;
}
.loading{
	padding-bottom: 6.5rem;
	text-align: center;
	color: #ccc;
}
</style>
